﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="EasyForm.aspx.cs" Inherits="Cms.Web.UIBuilder.EasyForm" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>表单设计界面</title>
    <link href="../App_Themes/Default/960/text.css" rel="stylesheet" type="text/css" />
    <link href="../App_Themes/Default/960/960.css" rel="stylesheet" type="text/css" />
    <link href="../App_Themes/Default/960/reset.css" rel="stylesheet" type="text/css" />

    <script src="../Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>

    <link href="../App_Themes/Default/easyui/easyui.css" rel="stylesheet" type="text/css" />
    <link href="../App_Themes/Default/easyui/icon.css" rel="stylesheet" type="text/css" />

    <script src="../Scripts/easyui/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>

    <script src="../Scripts/easyui/jquery.easyui.min.js" type="text/javascript"></script>

    <script src="../Scripts/960layout.js" type="text/javascript"></script>
    <style type="text/css">
        #ctrllist
        {
            margin: 1px;
            padding: 1px;
        }
        .ctrl
        {
            background: #ccc;
            border: 1px solid #aaa dotted;
            padding: 3px 0;
            margin: 3px 0;
            list-style: none;
        }
        .over
        {
            border: 2px dotted red;
        }
        #Canvas
        {
            /*position:;*/
        }
        .design
        {
            position: relative;
            width: 200px;
            height: 25px;
            border: 1px solid red;
        }
        .design *
        {
            width: 100%;
        }
        .gridrow
        {
            /*margin-bottom:2px;*/
        }
        .colspan
        {
            height: 100%;
        }
        .gridcell
        {
            /*border: 1px dotted #ace;*/
            height: 50px;
            background: #fff;
            border-bottom: 1px dotted #eee;
        }
        .gridcell.checked
        {
            /*border: 1px dotted red;*/
            background: yellow;
        }
        .mulitrow
        {
            /*border: 2px dotted red;*/
        }
        .colspan
        {
            /*border: 2px dotted yellow;*/
        }
    </style>

    <script type="text/javascript">
        var CtrolAttributes = {
            Common: [
                { "name": "id", "value": "", "group": "通用", "editor": "text" },
                { "name": "name", "value": "", "group": "通用", "editor": "text" },
                { "name": "width", "value": "100%", "group": "样式", "editor": "text" },
                { "name": "height", "value": "100%", "group": "样式", "editor": "text" },
                { "name": "background", "value": "", "group": "样式", "editor": "text" },
                { "name": "border", "value": "", "group": "样式", "editor": "text" },
            ],
            Label: {},
            Input: {}
        };
        function newGuid(joinstr) {
            var guid = "";
            if (!joinstr)
                joinstr = "-";
            for (var i = 1; i <= 32; i++) {
                var n = Math.floor(Math.random() * 16.0).toString(16);
                guid += n;
                if ((i == 8) || (i == 12) || (i == 16) || (i == 20)) {
                    guid += joinstr;
                }
            }
            return guid;
        }

        $(function() {
            BuildForm("Canvas", $("#txtCols").val(), $("#txtRows").val());
            $('.ctrl').draggable({
                revert: true,
                proxy: 'clone',
                onStopDrag: function(e) {
                    //debugger;
                    //$(".selected", e.target).css(CurMousePos);
                }
            });
            $('.gridcell').droppable({
                onDragEnter: function() {
                    $(this).addClass('over');
                },
                onDragLeave: function() {
                    $(this).removeClass('over');
                },
                onDrop: function(e, source) {
                    $(this).removeClass('over');
                    if ($(source).hasClass('assigned')) {
                        $(this).append(source);
                    } else {
                        var c = $(source).clone().addClass('assigned');
                        $(this).empty().append(c);
                        c.draggable({
                            revert: true
                        });
                    }
                }
            });

            $("#btnSetConfig").click(function() {
                var cols = $("#txtCols").val();
                var rows = $("#txtRows").val();
                if (!cols || cols == "")
                    cols = "3";
                cols = parseInt(cols);
                rows = parseInt(rows);
                BuildForm("Canvas", cols, rows);
            });
            $("#btnRight").click(function() {
                MergerToRight();
            });
            $("#btnNext").click(function() {
                MergerToDown();
            });
            $('#tt').propertygrid({
                height: 'auto',
                showGroup: true,
                showHeader: false,
                scrollbarSize: 0
            });
            for (var i in CtrolAttributes.Common) {
                $('#tt').propertygrid('appendRow', CtrolAttributes.Common[i]);
            }
            $('#tt').propertygrid({
                showGroup: true
            });
        });
        
    </script>

</head>
<body class="easyui-layout">
    <div region="north" split="false" style="height: 30px;">
        <label for="txtCols">
            列数</label><input type="text" id="txtCols" style="width: 50px;" value="3" />
        <label for="txtRows">
            行数</label><input type="text" id="txtRows" style="width: 50px;" value="20" />
        <input type="button" id="btnSetConfig" value="设置" />
        <input type="button" id="btnRight" value="向右合并一个单元格" />
        <input type="button" id="btnNext" value="向下合并一个单元格" />
    </div>
    <div region="west" split="true" title="列表" style="width: 150px;">
        <ul id="ctrllist">
            <li class="ctrl label">标签</li>
            <li class="ctrl input">输入框</li>
            <li class="ctrl button">按钮</li>
        </ul>
    </div>
    <div region="east" iconcls="icon-reload" title="属性" split="true" style="width: 150px">
        <table id="tt" fit="true">
        </table>
    </div>
    <div region="center" id="Canvas" title="工作区" style="background: #eee;">
    </div>
    <div region="south" split="false" style="height: 30px;">
    </div>
</body>
</html>
